<template>
  <div>
    <div class="nav">
      <button :class="{'active': activeName === 0}" @click="handleChange(0)">相关专利</button>
      <button :class="{'active': activeName === 1}" @click="handleChange(1)">潜在新颖专利</button>
    </div>
    <!-- 相关专利 -->
    <Related v-if="activeName===0"/>
    <!-- 潜在新颖专利 -->
    <Potential v-if="activeName===1"/>
  </div>
</template>

<script>
import Related from './Related'
import Potential from './Potential'
export default {
  components: {
    Related,
    Potential
  },
  data() {
    return {
      activeName: 0,
    }
  },
  methods: {
    handleChange(index) {
      this.activeName = index
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  position: relative;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  button {
    height: 34px;
    padding: 0 30px;
    border-radius: 4px;
    margin-right: 20px;
    font-size: 12px;
    color: #4f515b;
    background-color: #f3f5f8;
    &.active {
      font-weight: bold;
      color: #fff;
      background-color: #504da6;
    }
  }
}
</style>